<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-03-02 20:27:07
-->
<template>
    <div class="searchdetail w">
        <h2>搜索 {{ info.keyword }}</h2>
        <div class="info">
            <span class="n">你可能感兴趣</span>
            <div class="main">
                <!-- 展示歌手信息 -->
                <div class="singer" @click="gotoSinger" v-if="Object.keys(info.singerDel) != 0">
                    <!-- 左侧 -->
                    <div class="savl">
                        <img :src="info.singerDel.img1v1Url" alt="">
                    </div>
                    <!-- 右侧 -->
                    <div class="right">
                        <div class="singer-info">
                            歌手: {{ info.singerDel.name }}
                            <span v-if="info.alias">({{ info.alias }})</span>
                        </div>
                        <div class="fan">
                            <span>粉丝:{{ instance.proxy.$formatNums.formatNum(info.singerDel.fansSize) }},</span>
                            <span>歌曲:{{ info.singerDel.musicSize }}</span>
                        </div>
                    </div>
                </div>
                <!-- 展示相关专辑 -->
                <div class="album" @click="gotoAlbum" v-if="Object.keys(info.album) != 0">
                    <!-- 左侧 -->
                    <div class="savl">
                        <img :src="info.album.picUrl" alt="">
                    </div>
                    <!-- 右侧 -->
                    <div class="right">
                        <div class="singer-info">
                            专辑: {{ info.album.name }}
                            <span>({{ info.album.artist.name }})</span>
                        </div>
                    </div>
                </div>
                <!-- 展示相关歌单 -->
                <div class="playlist" @click="gotoSonglist" v-if="Object.keys(info.playlist) != 0">
                    <!-- 左侧 -->
                    <div class="savl">
                        <img :src="info.playlist.coverImgUrl" alt="">
                    </div>
                    <!-- 右侧 -->
                    <div class="right">
                        <div class="singer-info">
                            歌单: {{ info.playlist.name }}
                        </div>
                        <div class="fan">
                            <span>歌曲:{{ info.playlist.trackCount }},</span>
                            <span>播放:{{ instance.proxy.$formatNums.formatNum(info.playlist.playCount) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- 导航栏 -->
        <div class="nav">
            <el-menu router :default-active="info.defaultActive" mode="horizontal">
                <el-menu-item v-for="(item, index) in info.topnav" :key="index" :index="item.path">
                    {{ item.name }}
                </el-menu-item>
            </el-menu>
        </div>

        <div class="content">
            <!-- 缓存路由组件 -->
            <router-view v-slot="{ Component }">
                <keep-alive>
                    <component :is="Component" />
                </keep-alive>
            </router-view>
        </div>

    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { reactive, onMounted, inject, watch, getCurrentInstance } from 'vue'
import { getGoodMatch } from '@/api/searchdetail/searchdetail.js'
const instance = getCurrentInstance()
const reload = inject('reload')
const route = useRoute()
const router = useRouter()
const info = reactive({
    keyword: '',
    topnav: [
        {
            name: '单曲',
            path: '/searchdetail/songres/' + route.params.keywords,
        }, {
            name: '歌手',
            path: '/searchdetail/singerres/' + route.params.keywords,
        }, {
            name: '专辑',
            path: '/searchdetail/albumres/' + route.params.keywords,
        }, {
            name: '视频',
            path: '/searchdetail/videores/' + route.params.keywords,
        }, {
            name: '歌单',
            path: '/searchdetail/songlistres/' + route.params.keywords,
        },
        {
            name: 'MV',
            path: '/searchdetail/mvres/' + route.params.keywords,
        }, {
            name: '用户',
            path: '/searchdetail/userres/' + route.params.keywords,
        }
    ],
    defaultActive: '',
    singerDel: {},  //歌手信息
    alias: '', //歌手别名
    album: {},//歌手专辑
    playlist: {},//歌单
})

//得到路径
function getActive() {
    let pathArr = route.path.split('/')
    info.defaultActive = `/${pathArr[1]}/${pathArr[2]}/${route.params.keywords}`
}

//获取搜索最佳匹配
async function getGoodMatchBy() {
    let res = await getGoodMatch(info.keyword)
    // console.log(res);
    if (res.data.code === 200) {
        if (res.data.result.artist) {
            info.singerDel = res.data.result.artist[0]
            info.alias = res.data.result.artist[0].alias[0]
        }
        //如果有专辑
        if (res.data.result.album)
            info.album = res.data.result.album[0]
        //如果有歌单
        if (res.data.result.playlist)
            info.playlist = res.data.result.playlist[0]
    }
}


//前往歌手
function gotoSinger() {
    router.push({
        name: 'Singerdetail',
        params: { id: info.singerDel.id }
    })
}

//前往专辑页面
function gotoAlbum() {
    router.push({
        name: 'Albumdetail',
        params: { id: info.album.id }
    })
}

//前往歌单页面
function gotoSonglist() {
    router.push({
        name: 'Songlistdetail',
        params: { id: info.playlist.id }
    })
}

//监听路由变化
watch(() => router.currentRoute.value, () => {
    reload()   //重新刷新页面
})

onMounted(() => {
    //获取传递的关键子
    info.keyword = route.params.keywords
    getActive();
    getGoodMatchBy()
})




</script>

<style lang="scss" scoped>
.searchdetail {
    .nav {
        position: relative;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .info {
        .n {
            display: inline-block;
            margin-top: 8px;

            font-size: 12px;
            color: #666666;
        }

        .main {
            display: flex;
            margin-top: 10px;

            .album,
            .singer,
            .playlist {
                margin-right: 25px;
                cursor: pointer;
                height: 70px;
                width: 295px;
                background-color: #f5f5f5;
                display: flex;
                align-items: center;

                .savl {
                    margin-left: 10px;
                    width: 50px;
                    height: 50px;

                    img {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;

                    }
                }

                .right {
                    margin-left: 5px;

                    .singer-info {
                        span {
                            color: #666666;
                        }
                    }

                    .fan {
                        margin-top: 5px;
                        font-size: 12px;
                        color: #666666;
                    }
                }
            }
        }
    }


}

.el-menu--horizontal>.el-menu-item.is-active {
    color: var(--mycompColor) !important;
    border-bottom: 2px solid var(--mycompColor);
    font-size: 16px;
}

.el-menu--horizontal {
    border: none;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    background: none;
    color: var(--mycompColor);
}
</style>